<template>
  <div
    class="card-showcase card-showcase-profile"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div
      class="card-showcase__container container-content-middle"
      ref="cardShowcase"
    >
      <template v-if="vsWidth > 767.98">
        <div class="splide-wrapper-desktop">
          <Splide
            ref="splideRef"
            :options="splideOptions"
            @splide:mounted="onSplideReady"
            @splide:move="onSplideMove"
          >
            <SplideSlide
              v-for="card in modelValue?.data"
              :key="card.id"
            >
              <div class="slide-content">
                <div class="slide-content__box bg-white shadow-lg">
                  <div v-if="card.imgSrc" class="img-wrapper">
                    <img
                      class="img-static"
                      :src="card.imgSrc"
                      :alt="card.alt || card.title"
                    />
                  </div>
                  <div class="slide-content__box__title">
                    {{ card.title }}
                  </div>
                  <div
                    v-if="card.subtitle"
                    class="slide-content__box__subtitle"
                    v-html="card.subtitle"
                  ></div>
                  <div
                    v-if="card.content"
                    class="slide-content__box__content"
                  >
                    {{ card.content }}
                  </div>
                </div>
              </div>
            </SplideSlide>
          </Splide>
          <div class="swiper-footer">
            <div class="swiper-button-prev" @click="goPrev"></div>
            <div class="swiper-pagination">
              <span
                v-for="(_card, index) in modelValue?.data"
                :key="index"
                :class="['swiper-pagination-bullet', { 'swiper-pagination-bullet-active': currentIndex === index }]"
                @click="goTo(index)"
              ></span>
            </div>
            <div class="swiper-button-next" @click="goNext"></div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="swiper-wrapper-mobile">
          <swiper
            ref="showCaseSlideMobile"
            :modules="modulesMobile"
            :centered-slides="true"
            :slides-per-view="1"
            :speed="600"
            :effect="'fade'"
            :fadeEffect="{ crossFade: true }"
            :loop="true"
            :autoHeight="true"
            :navigation="{
              nextEl: '.swiper-button-next-mobile',
              prevEl: '.swiper-button-prev-mobile'
            }"
            :pagination="{
              el: '.swiper-pagination-mobile',
              clickable: true
            }"
            class="swiper showcaseSlide swiper--mobile"
            @swiper="onSwiperMobileReady"
          >
            <swiper-slide
              v-for="card in modelValue?.data"
              :key="card.id"
            >
              <div class="slide-content-mobile">
                <div class="slide-content__box bg-white shadow-lg">
                  <div v-if="card.imgSrc" class="img-wrapper">
                    <img
                      class="img-static"
                      :src="card.imgSrc"
                      :alt="card.alt || card.title"
                    />
                  </div>
                  <h4 class="slide-content__box__title">
                    {{ card.title }}
                  </h4>
                  <div
                    v-if="card.subtitle"
                    class="slide-content__box__subtitle"
                    v-html="card.subtitle"
                  ></div>
                  <div
                    v-if="card.content"
                    class="slide-content__box__content"
                  >
                    {{ card.content }}
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="swiper-footer">
            <div class="swiper-button-prev-mobile swiper-button-prev"></div>
            <div class="swiper-pagination-mobile swiper-pagination"></div>
            <div class="swiper-button-next-mobile swiper-button-next"></div>
          </div>
        </div>
      </template>
    </div>

    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { ref, onBeforeUnmount } from 'vue'
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import '@splidejs/vue-splide/css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, EffectFade } from 'swiper/modules'
import type { Swiper as SwiperType } from 'swiper'
// 导入 Swiper 样式
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/effect-fade'
import { randomString } from '@/utils/common'
import Setting from './setting.vue'
import Operate from '@/common/Operate/index.vue'

// 定义组件名称
defineOptions({
  name: 'CardShowcaseProfile'
})

// 定义 props
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  isPreview: {
    type: Boolean,
    default: false
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

// 初始化数据
const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'CardShowcaseProfile',
    bgColor: '',
    data: [
      {
        id: randomString(),
        title: '耀华国际教育学校浙江桐乡1',
        subtitle: '耀华国际教育学校',
        content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
        alt: ''
      },
      {
        id: randomString(),
        title: '耀华国际教育学校浙江桐乡2',
        subtitle: '耀华国际教育学校',
        content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
        alt: ''
      },
      {
        id: randomString(),
        title: '耀华国际教育学校浙江桐乡3',
        subtitle: '耀华国际教育学校',
        content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
        imgSrc: 'https://osswebsite-test.cedim.cn/media-library/ywies-tx/images/high-school-test/home/different_1_optim.png',
        alt: ''
      }
    ]
  }
  emit('update:modelValue', data)
}

// 响应式数据
const isHover = ref(false)
const showSetting = ref(false)
const cardShowcase = ref<HTMLElement | null>(null)
const splideRef = ref<any>(null)
const showCaseSlideMobile = ref<SwiperType | null>(null)
const vsWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
const currentIndex = ref(0)

// Swiper 模块（仅用于移动端）
const modulesMobile = [Navigation, Pagination, EffectFade]

// Splide 配置
const splideOptions = {
  type: 'loop',
  perPage: 3,
  perMove: 1,
  focus: 'center',
  gap: '0px',
  speed: 600,
  arrows: false,
  pagination: false,
  drag: true,
  updateOnMove: true,
}

// 事件处理
const handleDelete = () => {
  if (props.modelValue?.id) {
    emit('handleDelete', props.modelValue.id)
  }
}

const handleCopy = () => {
  if (props.modelValue) {
    emit('handleCopy', props.modelValue)
  }
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

// 窗口大小调整
const handleResize = () => {
  vsWidth.value = typeof window !== 'undefined' ? window.innerWidth : 1024
}
if (typeof window !== 'undefined') window.addEventListener('resize', handleResize)

// Splide 事件处理
const onSplideReady = (splide: any) => {
  console.log('Splide initialized:', {
    index: splide.index,
    length: splide.length
  })
}

const onSplideMove = (_splide: any, newIndex: number) => {
  currentIndex.value = newIndex
}

// 导航方法
const goPrev = () => {
  if (splideRef.value?.splide) {
    splideRef.value.splide.go('<')
  }
}

const goNext = () => {
  if (splideRef.value?.splide) {
    splideRef.value.splide.go('>')
  }
}

const goTo = (index: number) => {
  if (splideRef.value?.splide) {
    splideRef.value.splide.go(index)
  }
}

const onSwiperMobileReady = (swiper: SwiperType) => {
  showCaseSlideMobile.value = swiper
}

// 清理
onBeforeUnmount(() => {
  if (typeof window !== 'undefined') window.removeEventListener('resize', handleResize)
})

// 初始化
handleInit()
</script>

<style lang="scss" scoped>
/* Minimal migrated utilities to avoid global.scss dependency */
.bg-white {
  background-color: #ffffff !important;
}

.shadow-lg {
  box-shadow: 0px 8px 32px rgba(130, 130, 140, 0.24) !important;
}

.text-center {
  text-align: center !important;
}

.img-wrapper {
  position: relative;
  height: 0;
  width: 100%
}
/* ===== 基础样式 ===== */

.card-showcase {
  position: relative;
  padding-bottom: 56px;
}

.card-showcase__container {
  position: relative;
  max-width: 1208px;
}

.container-content-middle {
  --max-width: 1208px;
  padding-left: 36px;
  padding-right: 36px;
  margin: 0 auto;
  max-width: calc(var(--max-width) + 72px);
}

@media(max-width: 1023.98px) {
  .container-content-middle {
    padding-left:24px;
    padding-right: 24px;
    max-width: calc(var(--max-width) + 48px);
  }
}

@media(max-width: 767.98px) {
  .container-content-middle {
    padding-left:12px;
    padding-right: 12px;
    max-width: calc(var(--max-width) + 24px);
  }
}

@media(max-width: 575.98px) {
  .container-content-middle {
    padding-left:12px;
    padding-right: 12px;
    max-width: calc(var(--max-width) + 24px);
  }
}

/* ===== Swiper 导航和分页 ===== */

.swiper-footer {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  margin-top: 32px;

  .swiper-pagination {
    position: relative;
    bottom: 1px;
    display: flex;
    align-items: center;

    :deep(.swiper-pagination-bullet) {
      margin: 0 6px;
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: relative;
    left: 0;
    right: 0;
    margin-top: 0;
    width: 24px;
    height: 24px;
    background-image: url();
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: '';
  }

  .swiper-button-prev {
    transform: scale(-1);
  }
}

/* ===== Swiper 幻灯片样式 ===== */

.splide__slide {
  height: 400px;
  transition: all 0.4s ease-in-out;

  .slide-content {
    width: 100%;
    height: 288px;
    margin: 56px 0;
    opacity: 0.6;
    position: relative;
    cursor: pointer;
    // transform: scale(0.72);
  }

  .slide-content-mobile {
    width: 100%;
    height: 400px;
    position: relative;
    cursor: pointer;
    transform: scale(0.72);
  }
}

.splide__list > .is-active > .slide-content {
  z-index: 1;
  opacity: 1;
  box-shadow: 0px 8px 32px rgba(130, 130, 140, 0.24);
  // transform: scale(0.89) perspective(200px) translate3d(0, 0, 20px);
  transform: scale(1.4);
  transition: transform 0.3s;
}

.is-active .slide-content {
  opacity: 1;
}

.is-active .slide-content__box__content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-next {
  .slide-content {
    // transform: scale(0.72) perspective(200px) translate3d(0px, 0, 0px);
    opacity: 0.6;
  }
}

.is-prev {
  .slide-content {
    // transform: scale(0.72) perspective(200px) translate3d(0px, 0, 0px);
    opacity: 0.6;
  }
}

.swiper-pagination {
  bottom: 0;
}

/* ===== 幻灯片内容样式 ===== */

:deep(.slide-content-mobile .slide-content__box) {
  width: 100%;
  height: 100%;
  padding: 32px 24px;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

:deep(.slide-content-mobile .slide-content__box .img-wrapper) {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

:deep(.slide-content__box .img-wrapper img) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.slide-content-mobile .slide-content__box__title) {
  color: #0032a0;
  margin-top: 12px;
  margin-bottom: 8px;
}

:deep(.slide-content-mobile .slide-content__box__subtitle) {
  color: #FF8200;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: bold;
}

:deep(.slide-content__box__content) {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.slide-content-mobile .slide-content__box__content),
:deep(.slide-content-mobile .slide-content__box__content > *) {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.428;
  color: #64788f;
  line-height: 1.3;
}

:deep(.slide-content .slide-content__box) {
  width: 100%;
  height: 100%;
  padding: 23px 17px;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

:deep(.slide-content .slide-content__box .img-wrapper) {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

:deep(.slide-content .slide-content__box__title) {
  font-size: 17px;
  font-weight: bold;
  color: #0032a0;
  margin-top: 8px;
  margin-bottom: 6px;
}

:deep(.slide-content .slide-content__box__subtitle) {
  color: #FF8200;
  margin-bottom: 8px;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: bold;
}

:deep(.slide-content .slide-content__box__content),
:deep(.slide-content.slide-content__box__content > *) {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.428;
  color: #64788f;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .slide-content .slide-content__box__content, .slide-content__box__content>* {
    font-size: 10px;
    line-height: 1.33;
    letter-spacing: .02em;
  }
}

@media (max-width: 767.98px) {
  .slide-content-mobile .slide-content__box__content, .slide-content__box__content>* {
    font-size: 13px;
    line-height: 1.33;
    letter-spacing: .02em;
  }
}

@media (max-width: 1023.98px) {
  .slide-content__box__content, .slide-content__box__content>* {
    line-height: 1.285;
    letter-spacing: .03em;
    font-weight: 400;
  }
}

:deep(.swiper-pagination-horizontal) {
  width: auto !important;
}
</style>

